import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yp/config/index.dart';
import 'package:yp/router.dart';
import 'package:yp/widgets/ad_box.dart';
import 'package:yp/widgets/button_widget.dart';
import 'package:yp/widgets/index.dart';
import 'package:yp/widgets/tab_indicator.dart';

/// 拼团首页UI
class Collage extends StatefulWidget {
  const Collage({Key key}) : super(key: key);

  @override
  _CollageState createState() => _CollageState();
}

class _CollageState extends State<Collage> with SingleTickerProviderStateMixin {
  // AnimationController _controller;
  TabController _controller;

  var _tabList = [
    Tab(text: '精选'),
    // Tab(text: '美妆'),
    // Tab(text: '母婴'),
    // Tab(text: '玩具'),
    // Tab(text: '数码'),
    // Tab(text: '户外'),
    // Tab(text: '汽车'),
  ];

  @override
  void initState() {
    super.initState();

    // _controller = AnimationController(vsync: this);
    _controller =
        TabController(initialIndex: 0, length: _tabList.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: YPNavigationBar('超值拼团',
            showLine: false,
            backgroundColor: EsColors.Primary,
            backBtnColor: EsColors.White,
            titleColor: EsColors.White),
        body: Column(
          // children: [_tabHeadder(), _collageList()],
           children: [ _collageList()],
        ));
  }

  ///  tab栏切换的头部
  Widget _tabHeadder() {
    return Container(
      width: double.infinity,
      color: EsColors.Primary,
      child: ExtendedTabBar(
          tabs: List<Widget>.generate(
              _controller.length, (int index) => _tabList[index]),
          controller: _controller,
          labelColor: EsColors.White,
          labelStyle: TextStyle(
              color: EsColors.White,
              fontSize: EsSizes.LG,
              fontWeight: EsFontWeights.Medium),
          unselectedLabelStyle: TextStyle(
              color: EsColors.White,
              fontSize: EsSizes.SM,
              fontWeight: EsFontWeights.Normal),
          isScrollable: _controller.length > 5,
          unselectedLabelColor: EsColors.White,

          // 自定义原型指示器
          indicator: CustomUnderlineTabIndicator(
              borderSide: BorderSide(width: 3.0, color: Colors.white),
              insets: EdgeInsets.only(bottom: 3, left: 5, right: 5))),
    );
  }

  /// 下边对应的界面
  Widget _collageList() {
    return Expanded(
      child: TabBarView(
          controller: _controller,
          children: List<Widget>.generate(
                  _controller.length, (int index) => CollageIndexList(index))
              .toList()),
    );
  }
}

class CollageIndexList extends StatefulWidget {
  final int index;
  const CollageIndexList(this.index, {Key key}) : super(key: key);

  @override
  _CollageIndexListState createState() => _CollageIndexListState();
}

class _CollageIndexListState extends State<CollageIndexList> {
  @override
  Widget build(BuildContext context) {
    print(widget.index);
    return CustomScrollView(slivers: [
      // 广告位
      SliverToBoxAdapter(
          child: AdBox(
        aspectRatio: 355 / 145,
        adKey: 'Adv',
        height: 145,
        borderRadius: 0,
        margin: EdgeInsets.zero,
        text: true,
      )), // 今日必拼
      SliverToBoxAdapter(
          child: Column(
        children: [_mustCollage(), _hotCollage(), _tips()],
      )),
      SliverList(
        delegate: SliverChildBuilderDelegate((ctx, index) {
          return _item(index);
        }, childCount: 10),
      ),
      SliverToBoxAdapter(child: SizedBox(height: MediaQuery.of(context).padding.bottom + 10))
    ]);
  }

  /// 今日必拼
  Widget _mustCollage() {
    return Container(
      color: EsColors.BackGroundSecondary,
      child: Column(children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(14, 10, 14, 4),
          child: Row(
            children: [
              Image.asset('assets/images/collage_lightning.png'),
              SizedBox(width: 4),
              Text('今日必拼',
                  style: TextStyle(
                      fontSize: EsSizes.MD,
                      color: EsColors.Title,
                      fontWeight: EsFontWeights.Medium)),
              SizedBox(width: 10),
              time(),
              Expanded(child: SizedBox()),
              RichText(
                  text: TextSpan(children: [
                TextSpan(
                    text: '3',
                    style: TextStyle(
                        fontSize: EsSizes.SM,
                        color: EsColors.Title,
                        fontWeight: EsFontWeights.Medium)),
                TextSpan(
                    text: '/4',
                    style: TextStyle(
                        fontSize: EsSizes.XS,
                        color: EsColors.ContentSecondary,
                        fontWeight: EsFontWeights.Normal))
              ])),
            ],
          ),
        ),
        Container(
            decoration: EsDecoration.BoxShadowWithRadius,
            height: MediaQuery.of(context).size.width / 3 + 40,
            margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
            width: double.infinity,
            child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Container(
                    padding: EdgeInsets.all(6),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        CachedImage(
                            width: MediaQuery.of(context).size.width / 3 - 20,
                            height: MediaQuery.of(context).size.width / 3 - 20,
                            path:
                                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2017%2F123%2F423%2F4844324321_1995264432.jpg&refer=http%3A%2F%2Fcbu01.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635302305&t=88fed0f94922329d253a7c75d63ade15'),
                        SizedBox(height: 8),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: [
                                EsOutLineButton(
                                  '3人团',
                                  textColor: EsColors.Primary,
                                  borderColor: EsColors.Primary,
                                  fontSize: EsSizes.XXXS,
                                  padding: EdgeInsets.symmetric(
                                      vertical: 1, horizontal: 4),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(right: 5),
                                  child: Text('￥189',
                                      style: TextStyle(
                                          color: EsColors.Primary,
                                          fontSize: EsSizes.SM,
                                          fontWeight: EsFontWeights.Normal)),
                                ),
                              ],
                            ),
                            Text('已团98765件',
                                style: TextStyle(
                                    color: EsColors.ContentSecondary,
                                    fontSize: EsSizes.XS,
                                    fontWeight: EsFontWeights.Normal)),
                          ],
                        )
                      ],
                    ),
                  );
                }))
      ]),
    );
  }

  /// 时间显示 ？？？
  Widget time() {
    return Row(children: [
      Container(
        padding: EdgeInsets.all(1),
        decoration: BoxDecoration(
            color: EsColors.Content, borderRadius: BorderRadius.circular(3)),
        child: Text('08',
            style: TextStyle(
                fontSize: EsSizes.XXS,
                color: EsColors.White,
                fontWeight: EsFontWeights.Medium)),
      ),
      SizedBox(width: 2),
      Text('：',
          style: TextStyle(
              fontSize: EsSizes.XXS,
              color: EsColors.Content,
              fontWeight: EsFontWeights.Medium)),
      Container(
        padding: EdgeInsets.all(1),
        decoration: BoxDecoration(
            color: EsColors.Content, borderRadius: BorderRadius.circular(3)),
        child: Text('39',
            style: TextStyle(
                fontSize: EsSizes.XXS,
                color: EsColors.White,
                fontWeight: EsFontWeights.Medium)),
      ),
      SizedBox(width: 2),
      Text('：',
          style: TextStyle(
              fontSize: EsSizes.XXS,
              color: EsColors.Content,
              fontWeight: EsFontWeights.Medium)),
      Container(
        padding: EdgeInsets.all(1),
        decoration: BoxDecoration(
            color: EsColors.Content, borderRadius: BorderRadius.circular(3)),
        child: Text('42',
            style: TextStyle(
                fontSize: EsSizes.XXS,
                color: EsColors.White,
                fontWeight: EsFontWeights.Medium)),
      )
    ]);
  }

  /// 热评榜
  Widget _hotCollage() {
    return Container(
      margin: EdgeInsets.all(10),
      decoration: EsDecoration.BoxShadowWithRadius,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.fromLTRB(14, 10, 14, 4),
            child: Row(
              children: [
                Image.asset('assets/images/collage_fire.png'),
                SizedBox(width: 4),
                Text('热拼榜',
                    style: TextStyle(
                        fontSize: EsSizes.MD,
                        color: EsColors.Title,
                        fontWeight: EsFontWeights.Medium)),
                Expanded(child: SizedBox()),
                GestureDetector(
                    onTap: () {
                      Get.toNamed(RouteConfig.salesRankings);
                    },
                    child: Row(children: [
                      Text('更多',
                          style: TextStyle(
                              fontSize: EsSizes.XS,
                              color: EsColors.ContentSecondary,
                              fontWeight: EsFontWeights.Normal)),
                      Icon(
                        Icons.arrow_forward_ios,
                        size: EsSizes.XS,
                        color: EsColors.ContentSecondary,
                      )
                    ])),
              ],
            ),
          ),
          Container(
              height: MediaQuery.of(context).size.width / 3 + 40,
              width: double.infinity,
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: 3,
                  itemBuilder: (context, index) {
                    return Stack(
                      children: [
                        Container(
                          padding: EdgeInsets.all(6),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              CachedImage(
                                  width: MediaQuery.of(context).size.width / 3 -
                                      20,
                                  height:
                                      MediaQuery.of(context).size.width / 3 -
                                          20,
                                  path:
                                      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F05%2F13%2FFqA0VCuPjD8DwBXAWuh5wxkBynJZ.jpg&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635303801&t=a4ca85bd0844ce3b11e7dda50dfd8cf9'),
                              SizedBox(height: 8),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Row(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      EsOutLineButton(
                                        '3人团',
                                        textColor: EsColors.Primary,
                                        borderColor: EsColors.Primary,
                                        fontSize: EsSizes.XXXS,
                                        padding: EdgeInsets.symmetric(
                                            vertical: 1, horizontal: 4),
                                      ),
                                      Padding(
                                        padding: EdgeInsets.only(right: 5),
                                        child: Text('￥189',
                                            style: TextStyle(
                                                color: EsColors.Primary,
                                                fontSize: EsSizes.SM,
                                                fontWeight:
                                                    EsFontWeights.Normal)),
                                      ),
                                    ],
                                  ),
                                  Text('已团98765件',
                                      style: TextStyle(
                                          color: EsColors.ContentSecondary,
                                          fontSize: EsSizes.XS,
                                          fontWeight: EsFontWeights.Normal)),
                                ],
                              )
                            ],
                          ),
                        ),
                        Positioned(
                            left: 10,
                            top: 0,
                            child: Image.asset(
                                'assets/images//hot_top' +
                                    (index + 1).toString() +
                                    '.png',
                                width: 18,
                                height: 24,
                                fit: BoxFit.fill))
                      ],
                    );
                  }))
        ],
      ),
    );
  }

  /// 大家都在团
  Widget _tips() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(32, 10, 32, 14),
      child: Row(children: [
        Expanded(
            child: YpLine(height: 2, thickness: 2, color: EsColors.Primary)),
        SizedBox(width: 4),
        Text('大家都在团',
            style: TextStyle(
                fontSize: EsSizes.LG,
                color: EsColors.Primary,
                fontWeight: EsFontWeights.Medium)),
        SizedBox(width: 4),
        Expanded(
            child: YpLine(height: 2, thickness: 2, color: EsColors.Primary))
      ]),
    );
  }

  Widget _item(int index) {
    return Container(
      margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
      padding: EdgeInsets.all(10),
      decoration: EsDecoration.BoxShadowWithRadius,
      child: Row(
        children: [
          CachedImage(
              width: 130,
              height: 130,
              path:
                  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20190903%2F13%2F1567488509-nBLvqRfjrc.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633718640&t=65f1224b3ef6a31c77988153388af5d7'),
          SizedBox(width: 10),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                    constraints: BoxConstraints(minHeight: 70),
                    child: Stack(children: [
                      Text(
                          ' ' * (index == 1 ? 8 : 0) +
                              'Nature Republic自然共和国原自然乐园芦荟胶补水面霜面膜300ml',
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: EsColors.Title,
                              fontSize: EsSizes.SM,
                              fontWeight: EsFontWeights.Normal)),
                      Positioned(
                          top: 5,
                          child: Visibility(
                            visible: index == 1,
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: 3),
                              decoration: BoxDecoration(
                                  color: Color(0xfff50d2f),
                                  borderRadius: BorderRadius.circular(5)),
                              child: Text('新人团',
                                  style: TextStyle(
                                    color: EsColors.White,
                                    fontSize: EsSizes.XXXS,
                                    fontWeight: EsFontWeights.Normal,
                                  )),
                            ),
                          ))
                    ])),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        index == 1
                            ? Text('仅限新用户参团',
                                style: TextStyle(
                                    color: EsColors.ContentSecondary,
                                    fontSize: EsSizes.XS,
                                    fontWeight: EsFontWeights.Normal))
                            : Row(
                                children: [
                                  Padding(
                                    padding: EdgeInsets.only(top: 2, right: 5),
                                    child: EsOutLineButton(
                                      '2人团',
                                      textColor: EsColors.Primary,
                                      borderColor: EsColors.Primary,
                                      fontSize: EsSizes.XXXS,
                                      padding: EdgeInsets.symmetric(
                                          vertical: 1, horizontal: 4),
                                    ),
                                  ),
                                  Text('已团98765件',
                                      style: TextStyle(
                                          color: EsColors.ContentSecondary,
                                          fontSize: EsSizes.XS,
                                          fontWeight: EsFontWeights.Normal)),
                                ],
                              ),
                        Row(
                          children: [
                            Padding(
                              padding: EdgeInsets.only(top: 2, right: 5),
                              child: Text('￥189',
                                  style: TextStyle(
                                      color: EsColors.Primary,
                                      fontSize: EsSizes.XL,
                                      fontWeight: EsFontWeights.Normal)),
                            ),
                            Text('￥300',
                                style: TextStyle(
                                    decoration: TextDecoration.lineThrough,
                                    color: EsColors.ContentSecondary,
                                    fontSize: EsSizes.XS,
                                    fontWeight: EsFontWeights.Normal)),
                          ],
                        ),
                      ],
                    ),
                    Expanded(child: SizedBox()),
                    index == 2 || index == 4
                        ? EsOutLineButton(
                            '已拼完',
                            bgColor: Color(0xffededed),
                            borderColor: Color(0xffededed),
                            textColor: EsColors.White,
                            fontSize: EsSizes.MD,
                            fontWeight: EsFontWeights.Medium,
                            borderRadius: 16,
                            padding: EdgeInsets.symmetric(
                                vertical: 4, horizontal: 12),
                            onTap: () {
                              print('去拼团');
                            },
                          )
                        : EsOutLineButton(
                            '去拼团',
                            bgColor: EsColors.Primary,
                            textColor: EsColors.White,
                            fontSize: EsSizes.MD,
                            fontWeight: EsFontWeights.Medium,
                            borderRadius: 16,
                            padding: EdgeInsets.symmetric(
                                vertical: 4, horizontal: 12),
                            onTap: () {
                              print('去拼团');
                            },
                          )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
